import "./App.css";
import { RouterProvider } from "react-router-dom";
import router from "./router";
import { useEffect } from "react";
import { useDispatch } from "react-redux";
import { AppDispatch } from "./redux/store";
import { Actions } from "./redux/actions";
import { initVChartSemiTheme } from '@visactor/vchart-semi-theme';

// initialization
initVChartSemiTheme();

function App() {

  const dispatch = useDispatch<AppDispatch>()

  useEffect(() => {
    const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
    if (isDarkMode) {
      dispatch(Actions.PUB.setTheme('dark'))
      document.body.setAttribute('theme-mode', 'dark')
    }
  }, []);

  return (
    <main className="container">
      <RouterProvider router={router} />
    </main>
  );
}

export default App;
